<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/xin_base.css">
        <link rel="stylesheet" type="text/css" href="css/wanshanziliao.css">
        <link rel="stylesheet" type="text/css" href="css/laydate.css">
        <script type="text/javascript" src="js/laydate.js"></script>
        
    </head>
    <body>
		<div class="wanshanziliao">
			<form action="">
			<ol>
				<li>
					<label for="guishudi">手机归属地：</label>
					<select name="" id="">
						<option value="">中国大陆</option>
						<option value="">中国台湾</option>
					</select>
				</li>
				<li>
					<label for="shoujihao">手机号：</label>
					<input type="text" maxlength="11" placehoider="请输入11位手机号码" required id="shoujihao"  onkeyup='this.value=this.value.replace(/[^0-9]\D*$/,"")'>
				</li>
				<li>
					<label for="shenfen">身份：</label>
					<select name="" id="">
						<option value="">爱乐人</option>
						<option value="">家长</option>
						<option value="">习乐人</option>
					</select>
				</li>
				<li>
					<label for="aiyueqi">爱好的乐器：</label>
					<select name="" id="">
						<option value="">钢琴</option>
						<option value="">提琴</option>
						<option value="">吉他</option>
						<option value="">管乐</option>
						<option value="">弦乐</option>
					</select>
				</li>
				<li>
					<label for="xingbie">性别：</label>
					<input type="radio" name="sex" id="xingbie" checked="checked" value="男性">男性
					<input type="radio" name="sex" id="xingbie2" value="女性">女性
				</li>
				<li>
					<label for="shengri">生日日期：</label>
					<div class="shengri2">
						<div class="choice">
						<div class="demo1">
							<input class="laydate-icon" id="demo" value="2016-01-18"> 
						</div>
						<script type="text/javascript">
						!function(){
							laydate.skin('molv');//切换皮肤，请查看skins下面皮肤库
							laydate({elem: '#demo'});//绑定元素
						}();

						//日期范围限制
						var start = {
						    elem: '#start',
						    format: 'YYYY-MM-DD',
						    min: laydate.now(), //设定最小日期为当前日期
						    max: '2099-06-16', //最大日期
						    istime: true,
						    istoday: false,
						    choose: function(datas){
						         end.min = datas; //开始日选好后，重置结束日的最小日期
						         end.start = datas //将结束日的初始值设定为开始日
						    }
						};

						var end = {
						    elem: '#end',
						    format: 'YYYY-MM-DD',
						    min: laydate.now(),
						    max: '2099-06-16',
						    istime: true,
						    istoday: false,
						    choose: function(datas){
						        start.max = datas; //结束日选好后，充值开始日的最大日期
						    }
						};
						laydate(start);
						laydate(end);

						//自定义日期格式
						laydate({
						    elem: '#test1',
						    format: 'YYYY年MM月DD日',
						    festival: true, //显示节日
						    choose: function(datas){ //选择日期完毕的回调
						        alert('得到：'+datas);
						    }
						});

						//日期范围限定在昨天到明天
						laydate({
						    elem: '#hello3',
						    min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
						    max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
						});
						</script>
						</div>


					</div>
				</li>
				<li >
					<label for="ziwojishao">自我介绍：</label>
					<textarea name="" id="ziwojishao" required onKeyUp="textLimitCheck(this, 500);"></textarea>
					<div class="xianzhizishu">
						(限 500 个字符  已输入 <font color="#CC0000"><span id="messageCount">0</span></font> 个字)
						<script language=javascript>      
						String.prototype.getBytes = function() {     
						    var cArr = this.match(/[^\x00-\xff]/ig);     
						    return this.length + (cArr == null ? 0 : cArr.length);     
						}  
						function textLimitCheck(thisArea, maxLength){  
						    var len = thisArea.value.getBytes();  
						    if (len > maxLength)  
						    {  
						        alert(maxLength + ' 个字限制. \r超出的将自动去除.');  
						        var tempStr = "";  
						        var areaStr = thisArea.value.split("");  
						        var tempLen = 0;  
						        for(var i=0,j=areaStr.length;i<j;i++){  
						            tempLen += areaStr[i].getBytes();  
						            if(tempLen<=maxLength){  
						                tempStr += areaStr[i];  
						            }                 
						        }             
						        thisArea.value = tempStr  
						        thisArea.focus();  
						        }  
						        /*回写span的值，当前填写文字的数量*/  
						        messageCount.innerText = thisArea.value.length;  
						    }  
						</script>
					</div>
				</li>
				<li>
					<input type="submit" value="提交资料" class="tijiaoziliao">
				</li>
			</ol>
			</form>
		</div>
    </body>
</html>